<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">

    <title>Quran</title>

    <style>
        .title{
            text-align: center;
        }
        .softkey {
        height: 1.5rem;
        width: 100%;
        background-color: grey;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .softkey-right {
        width: 33% ;
        float: right;
        justify-content: space-between;
        text-align: right;
    }
    .softkey-center {
        width: 34% ;
        float: center;
        justify-content: space-between;
        text-align: center;

    }
    .softkey-left {
        width: 33% ;
        float: left;
        justify-content: space-between;
        text-align: left;
    }
    </style>

    <!-- Inline scripts are forbidden in Firefox OS apps (CSP restrictions),
         so we use a script file. -->
    <script src="fetch-inject.umd.min.js"></script>
    <script data-main="app" src="quran.js" defer></script>
    <script src="app.js" defer></script>

  </head>

  <body>
    <!-- This code is in the public domain. Enjoy! -->
    <div class="title"><h1>Simple Quran</h1></div>
    <select name="surah" style="width: 100%;" autofocus>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
        <option>21</option>
        <option>22</option>
        <option>23</option>
        <option>24</option>
        <option>25</option>
        <option>26</option>
        <option>27</option>
        <option>28</option>
        <option>29</option>
        <option>30</option>
        <option>31</option>
        <option>32</option>
        <option>33</option>
        <option>34</option>
        <option>35</option>
        <option>36</option>
        <option>37</option>
        <option>38</option>
        <option>39</option>
        <option>40</option>
        <option>41</option>
        <option>42</option>
        <option>43</option>
        <option>44</option>
        <option>45</option>
        <option>46</option>
        <option>47</option>
        <option>48</option>
        <option>49</option>
        <option>50</option>
        <option>51</option>
        <option>52</option>
        <option>53</option>
        <option>54</option>
        <option>55</option>
        <option>56</option>
        <option>57</option>
        <option>58</option>
        <option>59</option>
        <option>60</option>
        <option>61</option>
        <option>62</option>
        <option>63</option>
        <option>64</option>
        <option>65</option>
        <option>66</option>
        <option>67</option>
        <option>68</option>
        <option>69</option>
        <option>70</option>
        <option>71</option>
        <option>72</option>
        <option>73</option>
        <option>74</option>
        <option>75</option>
        <option>76</option>
        <option>77</option>
        <option>78</option>
        <option>79</option>
        <option>80</option>
        <option>81</option>
        <option>82</option>
        <option>83</option>
        <option>84</option>
        <option>85</option>
        <option>86</option>
        <option>87</option>
        <option>88</option>
        <option>89</option>
        <option>90</option>
        <option>91</option>
        <option>92</option>
        <option>93</option>
        <option>94</option>
        <option>95</option>
        <option>96</option>
        <option>97</option>
        <option>98</option>
        <option>99</option>
        <option>100</option>
        <option>101</option>
        <option>102</option>
        <option>103</option>
        <option>104</option>
        <option>105</option>
        <option>106</option>
        <option>107</option>
        <option>108</option>
        <option>109</option>
        <option>110</option>
        <option>111</option>
        <option>112</option>
        <option>113</option>
        <option>114</option>
    </select>
    <br><br>
    <div name="surah_text" style="direction: rtl; text-align: justify;"></div>
    <div name="licence" style="display: none; direction: ltr; text-align: left;">
    Copyright (C) 2019 Farooq Karimi Zadeh fkz@riseup.net
    This program has three parts: the source code and html code of it which
    is
    under GNU GPLv3, fetchInjection which is under zlib license and Quran
    text
    which is under the following license:
     PLEASE DO NOT REMOVE OR CHANGE THIS COPYRIGHT BLOCK
    
      Tanzil Quran Text (Simple Clean, version 1.0.2)
      Copyright (C) 2008-2010 Tanzil.net
      License: Creative Commons Attribution 3.0
    
      This copy of quran text is carefully produced, highly 
      verified and continuously monitored by a group of specialists 
      at Tanzil project.
    
      TERMS OF USE:
    
      - Permission is granted to copy and distribute verbatim copies 
        of this text, but CHANGING IT IS NOT ALLOWED.
    
      - This quran text can be used in any website or application, 
        provided its source (Tanzil.net) is clearly indicated, and 
        a link is made to http://tanzil.net to enable users to keep
        track of changes.
    
      - This copyright notice shall be included in all verbatim copies 
        of the text, and shall be reproduced appropriately in all files 
        derived from or containing substantial portion of this text.
      Please check updates at: http://tanzil.net/updates/
    </div>
    <br><br>
    <footer class="softkey">
        <div class="softkey-left">Licence</div>
        <div class="softkey-center">Surah</div>
        <div class="softkey-right"></div>
    </footer>
  </body>
</html>
